import React,{ Component } from 'react'
import { LegionsProDragger } from 'legions-pro-design';
import {
    Button,
    Steps,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    Checkbox,
    Select,
    Radio,
    DatePicker,
    Table,
    Collapse,
    message
} from 'antd';
const { TabPane } = Tabs;
const { MonthPicker,RangePicker } = DatePicker;
const { Panel } = Collapse;


const QuerylistICon = (props: IProps) => {
    const onOperationAdd = (type: string) => {
        props.onOperationAdd && props.onOperationAdd(type);
    }
    const onClickAddQuery = (type: string) => {
        props.onClickAddQuery && props.onClickAddQuery(type);
    }
    const basicComponent = [
        { name: 'text',icon: 'edit',text: '单行文本' },
        { name: 'textArea',icon: 'edit',text: '多行文本' },
        { name: 'checkBox',icon: 'edit',text: '复选框' },
        { name: 'select',icon: 'edit',text: '下拉选项' },
        { name: 'radioButton',icon: 'edit',text: '单选组合' },
        { name: 'date',icon: 'edit',text: '日期组件' },
        { name: 'daterange',icon: 'edit',text: '日期区间' },
    ]
    const operationComponent = [
        /* { name: 'export',icon: 'bars',text: '导出' },
        { name: 'import',icon: 'export',text: '导入' }, */
        { name: 'openCustomColumns',icon: 'primary',text: '自定义列' },
        { name: 'enabled',icon: 'unlock',text: '启用' },
        { name: 'disable',icon: 'lock',text: '禁用' },
        { name: 'delete',icon: 'delete',text: '删除' },
        { name: 'customBtn',icon: 'primary',text: 'Button' },
    ]
    return (
        <Collapse defaultActiveKey={['1']}>
            <Panel header="表格搜索参数" key="1">
                <LegionsProDragger
                    dragger-id="query"
                    style={{ width: '100%' }}
                    options={{
                        animation: 150,
                        group: {
                            name: 'query',
                            pull: true,
                            put: true,

                        },
                        sort: false,
                        dataIdAttr: 'query',
                    }}
                    onChange={(items: string[]) => {
                    }}
                >
                    {basicComponent.map((item) => {
                        return (
                            <Col span={12} style={{ marginBottom: '15px',display: 'table' }} data-id={item.name} key={item.name}>
                                <Button onClick={onClickAddQuery.bind(void 0,item.name)} type={'dashed'} style={{ width: '98%',height: '35px',paddingLeft: '2px',paddingRight: '2px' }}>
                                    <span style={{ display: 'block',whiteSpace: 'normal' }}>
                                        {item.text}
                                    </span>
                                </Button>

                            </Col>
                        )
                    })}
                </LegionsProDragger>
            </Panel>
            <Panel header="表格操作" key="2">
                <LegionsProDragger
                    dragger-id="operation"
                    style={{ width: '100%' }}
                    options={{
                        animation: 150,
                        group: {
                            name: 'operation',
                            pull: true,
                            put: true,
                        },
                        sort: false,
                        dataIdAttr: 'operation',
                    }}
                    onChange={(items: string[]) => {
                    }}
                >
                    {
                        operationComponent.map((item) => {
                            return <Col span={12} style={{ marginBottom: '15px',display: 'table' }} data-id={item.name} key={item.name}>
                                <Button type={'dashed'} onClick={onOperationAdd.bind(void 0,item.name)} icon={item.icon} style={{ width: '98%',height: '35px',paddingLeft: '2px',paddingRight: '2px' }}>
                                    <span /* style={{ display: 'block',whiteSpace: 'normal' }} */>
                                        {item.text}
                                    </span>
                                </Button>

                            </Col>
                        })
                    }
                </LegionsProDragger>
            </Panel>
            <Panel header="表格组件" key="3">
                <LegionsProDragger
                    dragger-id="content"
                    style={{ width: '100%' }}
                    options={{
                        animation: 150,
                        group: {
                            name: 'content',
                            pull: true,
                            put: true,
                        },
                        sort: false,
                    }}
                    onChange={(items: string[]) => {
                    }}
                >
                    <Col span={12} style={{ marginBottom: '15px',display: 'table' }} data-id={'query-table'} key={'query-table'}>
                        <Button type={'dashed'} icon={'bars'} style={{ width: '98%',height: '35px',paddingLeft: '2px',paddingRight: '2px' }}>
                            <span /* style={{ display: 'block',whiteSpace: 'normal' }} */>
                                列表组件
                            </span>
                        </Button>

                    </Col>
                </LegionsProDragger>
            </Panel>
        </Collapse>
    )
}
interface IProps {
    onOperationAdd: (type: string) => void
    onClickAddQuery: (type: string) => void
}

export default QuerylistICon